<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>英雄</title>
  <link rel="stylesheet" href="css/hero.css" />
  <link rel="stylesheet" href="css/comm-v1.css" />
</head>

<body>
  <div class="herolist-box">
    <div class="clearfix herolist-types">
      <ul class="types-left">
        <li>综合</li>
        <li>定位</li>
      </ul>
      <ul class="clearfix 类型">
        <li data-支付类型="10">
          <span class="ms-radio"><i class="i"></i></span>
          <label>本周免费</label>
        </li>
        <li data-支付类型="11">
          <span class="ms-radio"><i class="i"></i></span>
          <label>新手推荐</label>
        </li>
      </ul>
      <ul class="clearfix 类型"> <!-- JS里 '.类型>li',组成一个数组,用来操作 li标签 -->
        <li class="当前蓝点" data-英雄类型="0">
          <span class="ms-radio"><i class="i"></i></span>
          <label>全部</label>
        </li>
        <li data-英雄类型 ="3">
          <span class="ms-radio"><i class="i"></i></span>
          <label>坦克</label>
        </li>
        <li data-英雄类型="1">
          <span class="ms-radio"><i class="i"></i></span>
          <label>战士</label>
        </li>
        <li data-英雄类型="4">
          <span class="ms-radio"><i class="i"></i></span>
          <label>刺客</label>
        </li>
        <li data-英雄类型="2">
          <span class="ms-radio"><i class="i"></i></span>
          <label>法师</label>
        </li>
        <li data-英雄类型="5">
          <span class="ms-radio"><i class="i"></i></span>
          <label>射手</label>
        </li>
        <li data-英雄类型="6">
          <span class="ms-radio"><i class="i"></i></span>
          <label>辅助</label>
        </li>
      </ul>
    </div>
    <div class="herolist-content">
      <ul class="显示英雄列表 clearfix">
        <!-- <li >
          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 数组比较多，放在了外接的js文件中 -->
  <script src="英雄匹配.js"></script>
</body>
</html>